<template>
  <div class="app-container home">
    <!-- 搜索栏 -->
    <div class="search-container">
      <el-input
        placeholder="搜索工会服务"
        prefix-icon="el-icon-search"
        v-model="searchKeyword"
        class="search-input"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </el-input>
    </div>

    <!-- 主要功能板块 -->
    <div class="function-blocks">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in mainFunctions" :key="index">
          <div class="function-block" :class="item.class" @click="navigateTo(item.path)">
            <div class="icon-container">
              <i :class="item.icon"></i>
            </div>
            <div class="function-name">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 次要功能板块 -->
    <div class="sub-functions">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in subFunctions" :key="index">
          <div class="sub-function-block" @click="navigateTo(item.path)">
            <div class="sub-icon-container">
              <i :class="item.icon"></i>
            </div>
            <div class="sub-function-name">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 高效办一件事 -->
    <div class="quick-service">
      <div class="section-header">
        <span>高效办一件事</span>
        <span class="more">更多 ></span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item, index) in quickServices" :key="index">
          <div class="quick-service-item" @click="navigateTo(item.path)">
            <div class="quick-service-icon">
              <i :class="item.icon"></i>
            </div>
            <div class="quick-service-info">
              <div class="quick-service-name">{{ item.name }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      searchKeyword: "",
      // 主要功能板块
      mainFunctions: [
        {
          name: "民主管理",
          path: "/system/democratic",
          icon: "el-icon-s-custom",
          class: "democratic"
        },
        {
          name: "调查问卷",
          path: "/system/survey",
          icon: "el-icon-document",
          class: "survey"
        },
        {
          name: "活动管理",
          path: "/system/activity",
          icon: "el-icon-s-promotion",
          class: "activity"
        },
        {
          name: "工会成果",
          path: "/system/achievements",
          icon: "el-icon-trophy",
          class: "achievement"
        }
      ],
      // 次要功能板块
      subFunctions: [
        {
          name: "经费管理",
          path: "/system/finance",
          icon: "el-icon-money"
        },
        {
          name: "资产管理",
          path: "/system/assets",
          icon: "el-icon-office-building"
        },
        {
          name: "乡村振兴",
          path: "/system/rural",
          icon: "el-icon-house"
        },
        {
          name: "业务流程",
          path: "/system/workflow",
          icon: "el-icon-connection"
        },
        {
          name: "会员服务",
          path: "/system/members",
          icon: "el-icon-user"
        },
        {
          name: "建言献策",
          path: "/system/suggestions",
          icon: "el-icon-chat-line-square"
        },
        {
          name: "通知公告",
          path: "/system/notice",
          icon: "el-icon-bell"
        },
        {
          name: "更多服务",
          path: "/system/more",
          icon: "el-icon-more"
        }
      ],
      // 快速服务事项
      quickServices: [
        {
          name: "会员入会办理",
          path: "/service/join",
          icon: "el-icon-user-solid"
        },
        {
          name: "困难帮扶申请",
          path: "/service/help",
          icon: "el-icon-umbrella"
        },
        {
          name: "劳动争议调解",
          path: "/service/dispute",
          icon: "el-icon-document-checked"
        },
        {
          name: "工会活动报名",
          path: "/service/registration",
          icon: "el-icon-date"
        }
      ]
    };
  },
  methods: {
    handleSearch() {
      this.$message.info("搜索关键词: " + this.searchKeyword);
    },
    navigateTo(path) {
      // 定义路径映射表
      const pathMapping = {
        '/system/survey': '/system/survey/index',
        '/service/join': '/service/join'
      };
      
      // 检查是否是可用功能
      if (pathMapping[path]) {
        this.$router.push(pathMapping[path]);
        return;
      }
      
      // 如果是未开放功能，显示提示
      this.$message({
        message: '该功能正在开发中...',
        type: 'info'
      });
    },
    checkPermission() {
      // 这里可以根据实际情况添加权限检查逻辑
      return true; // 调查问卷功能已开放
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.search-container {
  margin-bottom: 20px;
  
  .search-input {
    width: 100%;
  }
}

.function-blocks {
  margin-bottom: 20px;
  
  .function-block {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    &:hover {
      transform: translateY(-5px);
    }
    
    .icon-container {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      
      i {
        font-size: 24px;
        color: #fff;
      }
    }
    
    .function-name {
      font-size: 14px;
      font-weight: bold;
    }
    
    &.democratic {
      border: 1px solid #f56c6c;
      .icon-container {
        background-color: #f56c6c;
      }
    }
    
    &.survey {
      border: 1px solid #409eff;
      .icon-container {
        background-color: #409eff;
      }
    }
    
    &.activity {
      border: 1px solid #67c23a;
      .icon-container {
        background-color: #67c23a;
      }
    }
    
    &.achievement {
      border: 1px solid #e6a23c;
      .icon-container {
        background-color: #e6a23c;
      }
    }
  }
}

.sub-functions {
  margin-bottom: 20px;
  
  .sub-function-block {
    background-color: #fff;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .sub-icon-container {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 5px;
      
      i {
        font-size: 24px;
        color: #606266;
      }
    }
    
    .sub-function-name {
      font-size: 12px;
    }
  }
}

.quick-service {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    
    .more {
      font-size: 14px;
      color: #909399;
      font-weight: normal;
      cursor: pointer;
    }
  }
  
  .quick-service-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 4px;
    cursor: pointer;
    
    &:hover {
      background-color: #f5f7fa;
    }
    
    .quick-service-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ecf5ff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      
      i {
        font-size: 20px;
        color: #409eff;
      }
    }
    
    .quick-service-name {
      font-size: 14px;
    }
  }
}
</style>

